<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>我的空间</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
	<link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<script src="js/config.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/navbar-component.js?v=2"></script>
	<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
</head>

<body class="bodybg">
	<div id="app" v-cloak>
		<nav-top-bar golink="/wode.html" linktitle="我的空间"></nav-top-bar>
		<div class="wodekongjian-nav">
			<ul class="d-f a-c-c">
				<li :class="{on:'note'===tab}" @click="tabswitch('note')">笔记</li>
				<!-- <li :class="{on:'translate'===tab}" @click="tabswitch('translate')">翻译</li> -->
				<li :class="{on:'video'===tab}" @click="tabswitch('video')">视频</li>
				<li :class="{on:'word'===tab}" @click="tabswitch('word')">单词</li>
			</ul>
		</div>
		<div class="wodekongjian-wrapper">
			<!-- 笔记 -->
			<div class="wodebiji-cont" v-show="'note'===tab">
				<nut-infiniteloading @loadmore="loadMore()" :has-more="list.note.hasMore" :is-loading="list.loading"
					:is-showMod="true" unload-more-txt="没有更多了">
					<div class="hotbox xuexi-shipin kongjian-cont" v-for="item in list.note.rows">
						<ul class="kecheng-cells">
							<li class="d-f j-c-s a-c-c">
								<div class="hotbox-top">
									<img :src="item.cover_url" class="product-img product-img2" />
									<div class="hotbox-label">
										<div class="spsc spsc2 d-f a-c-c">
											<img src="img/wode/icon_biji_bo.png" class="spsc-icon" />
											<span class="spsc-num">{{ durationFormat(item.duration) }}</span>
										</div>
									</div>
								</div>
								<div class="shipin-cont flex1">
									<div class="jihua-title">{{ item.title }}</div>
									<div class="shipin-time d-f a-c-c j-c-s">
										<div class="xuexi-jindu d-f a-c-c">
											<span class="jindu-label" :style="{width:item.progress||0+'%'}"></span>
											<i class="jindu-num">{{ item.progress||0 }}%</i>
										</div>
										<div class="lijixueli" @click="go(item.id)">学习课程</div>
									</div>
								</div>
							</li>
						</ul>
						<div class="wodebiji-cells">
							<template v-for="note in item.note">
								<nut-leftslip :ref="`note${note.id}`">
									<div slot="slip-main" class="wodebiji-cell-list d-f">
										<img src="img/wode/icon_biji_biaoqian.png" class="biaoqian-icon" />
										<div class="wodebiji-list-text flex1">{{ note.note }}</div>
									</div>
									<div slot="slipbtns" class="slipbtns">
										<nut-button @click="delNote(note)">删除</nut-button>
									</div>
								</nut-leftslip>
							</template>
						</div>
					</div>
				</nut-infiniteloading>
			</div>
			<!-- 翻译 -->
			<div class="wdkj-fanyi-box" v-show="'translate'===tab">
				<div class="fanyi-cell-list">
					<div class="fanyi-cell">
						<p class="fanyi-cell-title">英文原文</p>
						<p class="fanyi-cell-text">There were two thoughts in my head.</p>
					</div>
					<div class="fanyi-cell">
						<p class="fanyi-cell-title">我的翻译</p>
						<p class="fanyi-cell-text fanyi-cell-text2">我的脑子里有两个想法。</p>
					</div>
				</div>
				<div class="fanyi-cell-list">
					<div class="fanyi-cell">
						<p class="fanyi-cell-title">英文原文</p>
						<p class="fanyi-cell-text">There were two thoughts in my head.</p>
					</div>
					<div class="fanyi-cell">
						<p class="fanyi-cell-title">我的翻译</p>
						<p class="fanyi-cell-text fanyi-cell-text2">我的脑子里有两个想法。</p>
					</div>
				</div>
				<div class="fanyi-cell-list">
					<div class="fanyi-cell">
						<p class="fanyi-cell-title">英文原文</p>
						<p class="fanyi-cell-text">There were two thoughts in my head.</p>
					</div>
					<div class="fanyi-cell">
						<p class="fanyi-cell-title">我的翻译</p>
						<p class="fanyi-cell-text fanyi-cell-text2">我的脑子里有两个想法。</p>
					</div>
				</div>
				<div class="fanyi-cell-list">
					<div class="fanyi-cell">
						<p class="fanyi-cell-title">英文原文</p>
						<p class="fanyi-cell-text">There were two thoughts in my head.</p>
					</div>
					<div class="fanyi-cell">
						<p class="fanyi-cell-title">我的翻译</p>
						<p class="fanyi-cell-text fanyi-cell-text2">我的脑子里有两个想法。</p>
					</div>
				</div>
				<div class="fanyi-cell-list">
					<div class="fanyi-cell">
						<p class="fanyi-cell-title">英文原文</p>
						<p class="fanyi-cell-text">There were two thoughts in my head.</p>
					</div>
					<div class="fanyi-cell">
						<p class="fanyi-cell-title">我的翻译</p>
						<p class="fanyi-cell-text fanyi-cell-text2">我的脑子里有两个想法。</p>
					</div>
				</div>
			</div>
			<!-- 视频 -->
			<div class="category-wrapper" v-show="'video'===tab">
				<div class="hotbox category-cells">
					<nut-infiniteloading @loadmore="loadMore()" :has-more="list.video.hasMore"
						:is-loading="list.loading" :is-showMod="true" unload-more-txt="没有更多了">
						<ul class="kecheng-cells">
							<template v-for="item in list.video.rows">
								<li class="d-f j-c-s a-c-c" @click="go(item.id)">
									<div class="hotbox-top">
										<img :src="item.cover_url" class="product-img product-img2" />
										<div class="hotbox-label">
											<div class="spsc spsc2 d-f a-c-c">
												<img src="img/wode/icon_biji_bo.png" class="spsc-icon" />
												<span class="spsc-num">{{ durationFormat(item.duration) }}</span>
											</div>
										</div>
									</div>
									<div class="keshi-xq flex1">
										<p class="product-title">{{ item.title }}</p>
										<div class="product-leibie">
											<span>热度{{ item.hot }}</span>
										</div>
									</div>
								</li>
							</template>
						</ul>
					</nut-infiniteloading>
				</div>
			</div>
			<!-- 单词 -->
			<div class="dancixiangqing-box1 wdkj-danci-box" v-show="'word'===tab">
				<nut-infiniteloading @loadmore="loadMore()" :has-more="list.word.hasMore" :is-loading="list.loading"
					:is-showMod="true" unload-more-txt="没有更多了">
					<template v-for="item in list.word.rows">
						<nut-leftslip :ref="`word${item.id}`">
							<div slot="slip-main" class="dancixiangqing-list  d-f a-c-c j-c-s">
								<div class="dancixiangqing-body flex1">
									<p class="danci-title">{{ item.word }}</p>
									<p class="danci-jieshi">{{ item.cn }}</p>
								</div>
							</div>
							<div slot="slipbtns" class="slipbtns">
								<nut-button @click="delWord(item)">删除</nut-button>
							</div>
						</nut-leftslip>
					</template>
				</nut-infiniteloading>
			</div>
		</div>
	</div>
	<script>
		var vue = new Vue({
			el: '#app',
			data() {
				return {
					list: {
						note: {
							hasMore: true,
							page: 1,
							rows: []
						},
						translate: {
							hasMore: true,
							page: 1,
							rows: []
						},
						video: {
							hasMore: true,
							page: 1,
							rows: []
						},
						word: {
							hasMore: true,
							page: 1,
							rows: []
						},
						loading: false
					},
					tab: 'video',
				}
			},
			mounted() {
				this.getList();
			},
			methods: {
				// 列表接口
				getList() {
					this.list.loading = true;
					axios.get(`/mp/user/getList?page=${this.list[this.tab].page}&type=${this.tab}`).then(e => {
						this.list.loading = false;
						if (e.data.hasOwnProperty('code') && 0 === e.data.code) {
							this.list[this.tab].hasMore = false;
							this.$notify.warn(e.data.msg);
						} else {
							this.list[this.tab].rows.push(...e.data);
							this.list[this.tab].hasMore = 10 === e.data.length;
						}
					}).catch(e => {
						this.list.loading = false;
						this.list[this.tab].hasMore = false;
						this.$notify.danger('服务器请求异常');
					});
				},

				// 加载更多
				loadMore() {
					this.list[this.tab].page++;
					this.getList();
				},

				// 切换标签
				tabswitch(tab) {
					this.tab = tab;
					if (0 === this.list[tab].rows.length && this.list[tab].hasMore) {
						this.getList();
					}
				},

				// 删除笔记
				delNote(note) {
					const self = this;
					self.$dialog({
						id: 'delNote',
						content: '是否确认删除笔记？',
						onOkBtn(event) {
							this.close();
							const loading = this.$toast.loading('删除中...', { duration: 0 });
							axios.post('/mp/video/delNote', { id: note.id }).then(e => {
								loading.hide();
								if (1 === e.data.code) {
									self.$refs[`note${note.id}`][0].sliderEle.remove();
									this.$notify.success('删除成功');
								} else {
									this.$notify.warn(e.data.msg);
								}
							}).catch(e => {
								loading.hide();
								this.$notify.danger('服务器请求异常');
							});
						},
					});
				},

				// 删除单词
				delWord(word) {
					const self = this;
					self.$dialog({
						id: 'delWord',
						content: '是否确认删除单词？',
						onOkBtn(event) {
							this.close();
							const loading = this.$toast.loading('删除中...', { duration: 0 });
							axios.post('/mp/video/delWord', { id: word.id }).then(e => {
								loading.hide();
								if (1 === e.data.code) {
									self.$refs[`word${word.id}`][0].sliderEle.remove();
									this.$notify.success('删除成功');
								} else {
									this.$notify.warn(e.data.msg);
								}
							}).catch(e => {
								loading.hide();
								this.$notify.danger('服务器请求异常');
							});
						},
					});
				},

				// 时间格式化
				durationFormat(second) {
					let time = '';
					if (second > 3600) {
						// 超过1小时
						time = parseInt(second / 3600) + ':';
						second = second % 3600;
					}
					return time + parseInt(second / 60) + ':' + parseInt(second % 60);
				},

				// 跳转到视频页
				go(id) {
					window.location.href = '/shipinxuexi.html?id=' + id;
				}
			}
		})
	</script>
</body>

</html>